<template>
  <div>
    <template v-if="msgs && msgs.length > 0">
      <el-card v-for="item in msgs" :key="item.Id" class="msg">
        <template #header>
          <div>
            <el-link class="title" @click="openMsg(item)">
              <span v-if="item.MsgType == 0" :class="item.IsRead ? 'green' : 'blue'"></span>
              <span v-if="item.MsgType == 1" :class="item.MsgStatus == 2 ? 'green' : 'blue'"></span>
              <span
                v-if="HrMsgPriority[item.Priority]"
                class="priority"
                :style="{ color: HrMsgPriority[item.Priority].color }"
                >{{ '[' + HrMsgPriority[item.Priority].text + ']' }}</span
              >
              {{ item.MsgTitle }}
            </el-link>
            <span class="subTitle"><Icon icon="flowIcon" />{{ item.Attrs['NodeName'] }}</span>
            <span v-if="item.Tag" class="tag" :style="{ color: HrMsgTag[item.Tag].color }">{{
              HrMsgTag[item.Tag].text
            }}</span>
            <el-tag v-if="item.IsTimeOut" type="warning" class="timeOut">
              <Icon icon="ep:timer" />
              {{ item.time }}
            </el-tag>
            <span class="time" style="float: right">{{
              $formatTime(item.AddTime, 'yyyy-MM-dd HH:mm')
            }}</span>
          </div>
        </template>
        <el-row :gutter="8">
          <el-col :span="6">
            <div class="userInfo" v-if="item.FormEmp">
              <div class="head">
                <img
                  v-if="item.FormEmp.UserHead == null || item.FormEmp.UserHead == ''"
                  src="@/assets/imgs/avatar.png"
                  width="50"
                  height="50"
                />
                <el-avatar
                  v-else
                  shape="square"
                  :size="50"
                  :src="$formatFileUri(item.FormEmp.UserHead)"
                />
              </div>
              <div class="content">
                <div class="item">
                  <Icon v-if="item.FormEmp.Sex == 1" style="color: #409eff" icon="ep:male" />
                  <Icon v-else-if="item.FormEmp.Sex == 2" style="color: #f56c6c" icon="ep:female" />
                  <el-link @click="showEmp(item.FormEmp)">{{ item.FormEmp.EmpName }}</el-link>
                </div>
                <div class="empNo">{{ item.FormEmp.EmpNo }}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="18">
            <el-form v-if="item.Body" label-width="120">
              <el-row v-if="item.Body" class="body">
                <el-col v-for="(i, index) in item.Body" :key="index" :span="i.IsRow ? 24 : 8">
                  <el-form-item :label="i.Label">{{ i.Value }}</el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
        </el-row>
      </el-card>
    </template>
    <el-empty v-else description="暂无待办" />
    <empModel :id="empId" :visible="empVisible" @close="empVisible = false" />
  </div>
</template>

<script>
import * as msgApi from '@/api/msg/msg'
import { HrMsgPriority, HrMsgTag } from '@/config/msgDic'
import { empModel } from '../emp'
export default {
  components: {
    empModel
  },
  props: {
    query: {
      type: Object,
      default: () => {
        return {
          QueryKey: null,
          AppId: null,
          Priority: null,
          MsgClassify: null,
          MsgType: null,
          MsgStatus: 0,
          IsRead: null,
          IsTimeOut: null,
          Tag: null,
          Begin: null,
          End: null
        }
      }
    }
  },
  data() {
    return {
      HrMsgPriority,
      HrMsgTag,
      msgs: [],
      times: [],
      timeId: null,
      empId: null,
      empVisible: false,
      paging: {
        Size: 20,
        Index: 1,
        SortName: 'AddTime desc,Sort',
        IsDesc: true,
        Total: 0
      }
    }
  },
  computed: {},
  watch: {
    query: {
      handler(val) {
        if (val && val.MsgClassify != null && val.MsgType != null) {
          this.load()
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {},
  methods: {
    openMsg(item) {
      this.setRead(item.Id)
      if (item.LinkType === 'AuditMsg') {
        this.$router.replace({ name: 'appAudit', params: { id: item.LinkPk } })
      } else {
        this.$router.replace({ name: 'copyAudit', params: { id: item.LinkPk } })
      }
    },
    async setRead(id) {
      await msgApi.SetRead(id)
    },
    showEmp(emp) {
      this.empId = emp.EmpId
      this.empVisible = true
    },
    refresh() {
      this.times.forEach((c) => {
        this.format(c)
      })
      this.timeId = window.setTimeout(this.refresh, 5000)
    },
    async load() {
      if (this.timeId != null) {
        window.clearTimeout(this.timeId)
        this.timeId = null
      }
      const res = await msgApi.Query(this.query, this.paging)
      if (res.List) {
        this.times = []
        res.List.forEach((c) => {
          this.format(c)
        })
        this.msgs = res.List
        if (this.times.length > 0) {
          this.timeId = window.setTimeout(this.refresh, 5000)
        }
      } else {
        this.msgs = []
      }
      this.paging.Total = res.Count
    },
    formatMin(min) {
      let val = parseInt(min / 1440)
      let str = ''
      if (val !== 0) {
        str = val + '天'
        min = min % 1440
      }
      val = parseInt(min / 60)
      if (val !== 0) {
        str = str + val + '小时'
        min = min % 60
      }
      if (min !== 0) {
        str = str + min + '分钟'
      }
      return str
    },
    format(msg) {
      if (msg.TimeOut != null && msg.MsgStatus === 1) {
        msg.IsTimeOut = true
        const min = moment(msg.TimeOut).diff(moment(), 'minutes')
        if (min >= 0) {
          msg.time = this.formatMin(min)
        } else {
          msg.time = '超时' + this.formatMin(-min)
        }
        this.times.push(msg)
      } else {
        msg.IsTimeOut = false
      }
    }
  }
}
</script>
<style scoped>
.title {
  font-weight: 500;
  font-size: 15px;
}
.title .blue {
  border-radius: 50px;
  background: #1890ff;
  display: inline-block;
  padding: 6px;
  margin-right: 5px;
}
.title .green {
  border-radius: 50px;
  background: #43af2b;
  display: inline-block;
  padding: 6px;
  margin-right: 5px;
}
.subTitle {
  color: #838892;
  font-size: 14px;
  margin-left: 10px;
}
.subTitle .svg-icon {
  margin-right: 10px;
  color: #000;
}
.priority {
  font-weight: 700;
}
.msg {
  margin-bottom: 10px;
}
.time {
  font-size: 13px;
  color: #838892;
}
.timeOut {
  margin-left: 20px;
  font-size: 15px;
}
.tag {
  margin-left: 20px;
}
.timeOut .el-icon-time {
  font-weight: 700;
}
.tag .svg-icon {
  margin-right: 5px;
}
.body {
  margin-bottom: 20px;
}
.body .el-form {
  width: 100%;
}
</style>
